<template>
  <div class="homemain">
    <img src="@/images/bjmk.png" alt="" class="homebj" />
    <!-- 头部 -->
    <HeadMain />
    <!-- 提示 -->
    <img src="@/images/tipswz.png" alt="" class="tipswz" />

    <!-- 开始实验 -->
    <!---->
    <!-- 选择部分 -->
    <div class="mkhomebox">
      <div
        class="mkitem"
        v-for="item in mkdata"
        :key="item.id"
        @click="mkitemfn(item.id)"
      >
        {{ item.name }}
        <!-- <img :src="require(`@/images/mk${item.id}.png`)" alt="" /> -->
      </div>
      <!-- 占位 -->
    </div>
    <!-- 二次选择mo -->
    <div class="mkchoiceboxbg" v-if="mkchoiceshow">
      <div class="mkchoicebox">
        <div class="close" @click="mkchoiceshow = false"></div>
        <!-- name标题 -->
        <div class="mkchoicename">{{ mkname }}</div>
        <!-- 背景 -->
        <img src="@/images/mkchoicebj.png" class="mkchoicebj" />
        <!-- 选项 -->
        <div class="choicebox">
          <div class="choiceitem tool" @click="selectChoice(1)">
            <img
              src="@/images/hchoiceitem.png"
              class="choiceitembj normal"
              v-show="selectedChoice !== 1"
            />
            <img
              src="@/images/hchoiceitemac.png"
              class="choiceitembj active"
              v-show="selectedChoice != 1"
            />
            <img
              src="@/images/hchoiceitemac.png"
              alt=""
              class="choiceitembj"
              v-show="selectedChoice === 1"
            />
            <img src="@/images/mkchoice1.png" alt="" class="choiceitemimg" />
          </div>
          <div class="choiceitem tool" @click="selectChoice(2)">
            <img
              src="@/images/hchoiceitem.png"
              alt=""
              class="choiceitembj normal"
              v-show="selectedChoice !== 2"
            />
            <img
              src="@/images/hchoiceitemac.png"
              alt=""
              class="choiceitembj active"
              v-show="selectedChoice != 2"
            />
            <img
              src="@/images/hchoiceitemac.png"
              alt=""
              class="choiceitembj"
              v-show="selectedChoice === 2"
            />
            <img src="@/images/mkchoice2.png" alt="" class="choiceitemimg" />
          </div>
        </div>
        <!-- 确认 -->
        <!-- <div class="tool startbox" @click="startfn">
          <img src="@/images/startbj.png" alt="" class="active" />
          <img src="@/images/start.png" alt="" class="normal" />
          <div class="startname">开始实验</div>
        </div> -->
      </div>
    </div>
    <!-- 底部盒子 -->
    <div class="footbox">
      <img src="@/images/btbj.png" alt="" class="fontbj" />
    </div>
  </div>
</template>
<script>
import HeadMain from '@/components/headMain.vue'

export default {
  name: 'WorkspaceJsonLoaDing',
  components: {
    HeadMain
  },
  data() {
    return {
      mkchoiceshow: false,
      mkdata: [
        {
          id: 1,
          name: '诊断床定位精度检测'
        },
        {
          id: 2,
          name: '扫描架倾角精度检测'
        },
        {
          id: 3,
          name: 'CTDIw检测'
        },
        {
          id: 4,
          name: 'CATphan500模体检测'
        }
      ],
      mkname: '',
      mkid: '',
      selectedChoice: null // 新增，记录选中的选项
    }
  },

  methods: {
    mkitemfn(id) {
      if (id == 1) {
        this.$router.push({
          name: 'mK1'
        })
      }
      if (id == 2) {
        this.$router.push({
          name: 'mK2'
        })
      }
      if (id == 3) {
        this.$router.push({
          name: 'mK3'
        })
      }
      if (id == 4) {
        this.$router.push({
          name: 'mK4'
        })
      }
    },

    selectChoice(choice) {
      // 新增，选项点击事件
      this.selectedChoice = choice
    }
  }
}
</script>
<style scoped>
.homemain {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}
.homebj {
  width: 100%;
  height: 100%;
}
.mainbj {
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 895px;
  height: 774px;
}
.startbox {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, 0);
}
.startbox img {
  width: 200px;
  height: 50px;
}
.startname {
  font-size: 22px;
  letter-spacing: 0.05em;
  color: #cce8e0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  cursor: pointer;
  height: 280px;
  line-height: 280px;
}
.footbox {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 1887px;
  height: 65px;
  transform: translate(-50%, 0);
}
.fontbj {
  width: 1887px;
  height: 65px;
}
.bzleft {
  position: absolute;
  left: 80px;
  top: 50%;
  transform: translate(0, -50%);
  width: 125px;
  height: 23px;
}
.tipsbox {
  width: 1400px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 69%;
  transform: translate(-50%, -50%);
}
.mkhomebox {
  width: 1150px;
  /* height: 600px; */
  display: flex;
  flex-wrap: wrap;

  position: absolute;
  right: 35px;
  top: 50%;
  transform: translate(0, -50%);
  justify-content: space-around;
}
.mkitem {
  width: 371px;
  height: 149px;
  cursor: pointer;
  font-size: 22px;
  color: #fff;
}
.mkitem img {
  width: 371px;
  height: 149px;
}
.tipswz {
  position: absolute;
  left: 51%;
  top: 92px;
  width: 582px;
  height: 44px;
}
.mkchoicebox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 644px;
  height: 332px;
}
.mkchoicebj {
  width: 644px;
  height: 332px;
}
.choicebox {
  display: flex;
  position: absolute;
  top: 120px;
  left: 49%;
  transform: translate(-50%, 0);
  width: 93%;
  justify-content: space-around;
}
.choiceitem {
  position: relative;
  cursor: pointer;
}
.choiceitemimg {
  width: 125px;
  height: 21px;
  position: absolute;
}
.choiceitembj {
  width: 200px;
  height: 60px;
}
.close {
  position: absolute;
  top: 15px;
  right: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 999;
}
.mkchoiceboxbg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.mkchoicename {
  position: absolute;
  left: 40px;
  top: 15px;
  color: #fff;
  font-size: 30px;
  width: 500px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>
